<template>
  <div class="tableContent">
    <div class="table-header" v-if="tableConfig.headerButtons">
      <template slot-scope>
        <slot name="headerButtons"></slot>
      </template>
    </div>
    <el-table v-loading="loading" :data="tableData" :border="tableConfig.border" style="width: 100%"
      @selection-change="thatSelectCheckbox">
      <el-table-column v-if="tableConfig.selection" type="selection" width="35"
        :show-overflow-tooltip="true">
      </el-table-column>
      <template v-for="item in tableConfig.columns">
        <el-table-column v-if="item.slot" :prop="item.value" :label="item.label" :width="item.width"
          :key="item.value">
          <template slot-scope="scope">
            <slot :name="item.slot" :data="scope.row"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else :prop="item.value" :label="item.label" :width="item.width"
          :show-overflow-tooltip="item.overflow || true" :key="item.value">
        </el-table-column>
      </template>
    </el-table>
    <el-pagination v-if="tableConfig.pagination" class="pagination" background
      @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
      :page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "table-c",
  props: {
    tableData: {
      type: Array,
      required: true
    },
    tableConfig: {
      type: Object,
      default: () => { },
      required: true
    },
    loading: {
      type: Boolean,
      default: false,
    },
    SelectCheckbox: {
      type: Function,
    },
    current: {
      type: Number,
      default: 1
    },
    sizes: {
      type: Array,
      default: () => [10,20,50]
    },
    size: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    pageChange: {
      type: Function,
    },
  },
  data() {
    return {
      eLoading: false,
      pagination: {}
    }
  },
  methods: {
    thatSelectCheckbox(val) {
      if(this.SelectCheckbox) {   //调用父组件的方法，返回选中数据
        this.SelectCheckbox(val);
      }
    },
    handleSizeChange(val) {
      console.log(val);
      this.$emit("update:size",val) //更新父组件分页size
      this.$emit('pageChange'); //触发数据请求方法
    },
    handleCurrentChange(val) {
      console.log(val);
      this.$emit("update:current",val)//更新父组件分页current
      this.$emit('pageChange');//触发数据请求方法
    },
  },
}
</script>

<style lang="scss" scoped>
.tableContent {
  margin: 20px 0;
  background-color: #fff;
}
.table-header {
  height: auto;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  border: 1px solid #ebeef5;
  border-bottom: 0;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>